<template>
  <div class="order-box">
      <van-nav-bar fixed title="我的订单" left-arrow @click-left="$router.back()">
          <template #right>
              <van-icon name="ellipsis" size="18" />
          </template>
      </van-nav-bar>
      <!-- van-tabs -->
      <van-tabs v-model:active="active">
          <van-tab v-for="item in tabs" :key="item.text" :title="item.text"></van-tab>
      </van-tabs>
      <!-- list -->
      <van-list :offset="80" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="item in list" :key="item" :title="item" >
            <template #default="orderItem">
              <div>
                <p>
                  订单时间：{{ item.createTime }} ---{{ item.orderStatusString }}
                </p>
                <div v-for="v in item.newBeeMallOrderItemVOS" :key="v.goodsId">
                  <img :src="v.goodsCoverImg" alt="" style="width:180px">
                  <p>名称:{{ v.goodsName }}</p>
                  <p>单价:{{ v.sellingPrice }}</p>
                </div>
                <p>总价格：{{ item.totalPrice }}</p>
              </div>
            </template>
          </van-cell>
      </van-list>
  </div>
</template>

<script setup>

import { reactive, ref,watch,nextTick } from "vue"
import { getOrderList } from "../../api/index.js";

let tabs = reactive([
  {
      text: "全部",
      status: "",
  },
  {
      text: "待付款",
      status: "0",
  },
  {
      text: "待确认",
      status: "1",
  },

  {
      text: "待发货",
      status: "2",
  },
  {
      text: "已发货",
      status: "3",
  },
  {
      text: "交易完成",
      status: "4",
  },
]);
const loading = ref(false);
const finished = ref(false);
const list = ref([]);
const pageNumber = ref(1);
const status = ref("");
const active = ref(0);


const onLoad = () => {
  getOrderList(pageNumber.value++, status.value).then(res => {
    if (res.resultCode === 200) {
      if (res.data.list.length === 0) {
        finished.value = true;
      }
      console.log(list.value);
      console.log(res.data.list);
      list.value = list.value.concat(res.data.list)
      console.log(list.value);

      loading.value = false;
  }
 });
};

watch(active, (newVal, oldVal) => {
  status.value = tabs[newVal].status;
  pageNumber.value = 1;
  list.value = [];
  finished.value = false;
  onLoad();
})


</script>
<style lang="less" scoped>
.order-box {
  .van-tabs {
      position: fixed;
      top: 1.2rem;
      width: 100%;
      left: 0;
      z-index: 300
  }

  .van-list {
      padding-top: 2.2rem;
  }
}
</style>